<template>
  <div class="app">
      <div class="header">
          <div class="light">
            <el-carousel height="200px">
            <el-carousel-item>
              <a :href="urlpool[0]" target="_blank" style="text-decoration:none;">
                <div class="first">
                <span class="titledisc">{{tuisongpool[0]}}</span>
                </div>
              </a>
            </el-carousel-item>
            <el-carousel-item>
                <a :href="urlpool[1]" target="_blank" style="text-decoration:none;">
                <div class="second">
                <span class="titledisc">{{tuisongpool[1]}}</span>
                </div>
                </a>
            </el-carousel-item>
            <el-carousel-item>
                 <a :href="urlpool[2]" target="_blank" style="text-decoration:none;">
                <div class="third">
                <span class="titledisc">{{tuisongpool[2]}}</span>
                </div>
                </a>
            </el-carousel-item>
            <el-carousel-item>
                 <a :href="urlpool[3]" target="_blank" style="text-decoration:none;">
                <div class="four">
                <span class="titledisc">{{tuisongpool[3]}}</span>
                </div>
                </a>
            </el-carousel-item>
            </el-carousel>             
          </div>
          <div class="newsimg">
              <div class="img1">
                 <a :href="urlpool[4]" target="_blank" style="text-decoration:none;">
                <div class="five">
                <span class="titledisc1">{{tuisongpool[4]}}</span>
                </div>
                </a>


                 <!-- <span>{{tuisongpool[4]}}</span>
                 <span>{{urlpool[4]}}</span>
                 <img src="https://image.3001.net/images/20191012/15708398694700.png!420.280" class="carousel_image_type"> -->
              </div>
              <div class="img2">
                 <a :href="urlpool[5]" target="_blank" style="text-decoration:none;">
                <div class="six">
                <span class="titledisc1">{{tuisongpool[5]}}</span>
                </div>
                </a>

                 <!-- <span>{{tuisongpool[5]}}</span>
                 <span>{{urlpool[5]}}</span>
                 <img src="https://image.3001.net/images/20191008/15705018111001.png!420.280" class="carousel_image_type"> -->
              </div>
          </div>
      </div>
      
      <div class="body">
          <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
            <div v-for="item in data" :key="item.index">
                <div class="msgnavbar">
                  <div class="dianzan">
                      <img :src="dianzanImg" alt="">
                  </div>
                  <div class="contain">
                      <div class="title">
                        <a :href=item.BlogViewUrl target="_blank" style="text-decoration:none">
                          <span class="titlefont">{{item.BlogTitle}}</span></a>
                          <div class="usericon">
                            <img :src=item.Tbuser.IconUrl style="width:45px;">
                            <span class="disc">{{item.BlogDisc}}</span>
                          </div>
                          <div class="username">
                          <a href="javascript:void()" target="_blank" class="usernamefont"><span>{{item.Tbuser.Username}}</span></a>
                          <span class="f1">创建于:{{item.CreateTime}}</span>
                            <img :src="iconallow" alt="" class="allow">
                            <span>阅读({{item.BlogView}})</span>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
            <div class="loading">
                <img :src="loading" alt="" style="height:30px;width:30px">
            </div>
          </div>
      </div>
    
  </div>
</template>

<script>
import {apiurl} from "../service/api.js";

export default {
  name: 'home',
  created(){
      // this.getblog()
      document.querySelector("body").setAttribute("style","background-color: #f1f4f8af")
      this.track()   
  },
  data () {
    return {
        loading : require('../assets/loading.gif'),
        iconallow : require('../assets/iconarrow.gif'),
        count: 0,
        data: [],
        busy: false,
        datapool:[],

        tuisongpool : [], 
        urlpool :[],
        //本页信息
        category : '后端',
        page:1,
        totalpage: 1,
        dianzanImg : require('../assets/upup.gif'),
        datalength : 1,
    }
  },
  methods:{
      track(){
        var that = this
        that.$axios.get({
          url:apiurl.track+'?category='+that.category+'&pagecount=10',
        }).then(res=>{
          if(res.data.code==200){
            that.totalpage = res.data.totalpage
            this.getblog() 
          }
        })
      },
      getblog(){
        var that = this 
      that.$axios.get({
        url : apiurl.gettuisong
      }).then(res=>{
        if(res.data.code==200){
             for(var i=0;i<res.data.data.length;i++){
              that.tuisongpool.push(res.data.data[i].BlogTitle)
              that.urlpool.push(res.data.data[i].BlogViewUrl)
            }
        }
      })
      },
      loadMore: function(page) {
      if (this.page<=this.totalpage){
        this.busy = true
        setTimeout(() => {
        if(this.totalpage>=1){
              var that = this
        that.$axios.get({
          url:apiurl.souye+'?page='+that.page+'&pagecount=10'+'&category='+that.category,
        }).then(res=>{
          if(res.data.code==200){
            that.datalength = res.data.data.length
            for (var i = 0; i < that.datalength; i++) {
              that.datapool.push(res.data.data[i])
            }
            that.page+=1
          }else{
            this.busy = false
          }
        }).then(res=>{
          for (var i = 0; i < that.datalength; i++) {
          this.data.push(that.datapool[i])
        }
        that.datapool.splice(0,that.datapool.length)
        this.busy = false
        })
          }
      }, 500)
      }else{
        this.busy = false
        //删除滚动gif
        var elm=document.querySelector("body > div > div > div.body > div > div.loading > img")
        elm.parentNode.removeChild(elm);
        this.$notify({
          title: '警告',
          message: '已经到底部了',
          type: 'warning',
        });
      }
    },
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .app{
    position: absolute;
    top:100px;
    left: 20%;
  }
  .header{
      position: relative;
      margin: 0 auto;
      width: 900px;
      filter:alpha(opacity=50);
      overflow: hidden;
  }
  .light{
      position: relative;
      width: 500px;
      float: left;
  }
  .newsimg{
      position: relative;
      width: 390px;
      height: 200px;
      float: right;
  }
  .img1{
      position: relative;
      width: 390px;
      height: 100px;  

  }
  .img2{
      position: relative;
      width: 390px;
      height: 100px;  

      
  }
  .body{
      position: relative;
      margin-top: 30px;
      background: rgba(255, 255, 255, 0.945);
  }
  .msgnavbar{
      position: relative;
      width: 100%;
      height: 120px;
      border-bottom: 1px solid rgba(236, 230, 230, 0.884)
  }
  .loading{
      position: relative;
      margin-left: 50%;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: rgba(255, 255, 255, 0.3);
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: rgba(255, 255, 255, 0.3);
  }

  .dianzan{
    position: relative;
    padding-top: 10px;
    float: left;
  }
  .contain{
    width: 93%;
    height: 80%;
    float: right;
    margin-top: 5px;
  }
  .title{
    position: relative;
    float: left;
    margin-top: 5px;
  }
  .titlefont{
    font-weight: bold;
    color:rgba(7, 136, 223, 0.952);
    font-size: 18px;
  }
  .username{
    position: relative;
    margin-top: 50px;

  }
  .usernamefont{
    text-decoration:none;
    color: rgba(96, 187, 252, 0.788);
  }
  .f1{
    color: black;
  }
  .allow{
    position: relative;
    margin-left: 50px;
  }
  .usericon{
    width: 850px;
    height: 1px;
  }
  .disc{
    position: relative;
    margin-left: 10px;
    font-size: 15px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #9395979f;
  }
  .first{
    position: relative;
    background: url('https://image.3001.net/images/20190929/15697475172757.png!420.280');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  }
  .second{
    position: relative;
    background: url('https://image.3001.net/images/20190916/15686353614283.png!420.280');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  }
  .third{
    position: relative;
    background: url('https://image.3001.net/images/20190923/15692098198206.png!420.280');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  }
  .four{
    position: relative;
    background: url('https://image.3001.net/images/20191012/15708503446432.png!420.280');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  }
  .five{
    position: relative;
    background: url('https://image.3001.net/images/20191012/15708398694700.png!420.280');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  }
  .six{
    position: relative;
    background: url('https://image.3001.net/images/20191008/15705018111001.png!420.280');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  }
  .titledisc{
    position: relative;
    top:150px;
    color:rgb(245, 241, 14);
    font-weight: bold;
  }

  .titledisc1{
    position: relative;
    top:70px;
    color:rgb(245, 241, 14);
    font-weight: bold;
  }
</style>